<template>
    {{form}}
    <h2 style="text-align: center;">修改页面</h2>
    <table class="table">
        <tbody>
            <tr class="form-inline">
                <td><span style="color: red;">*</span>创建时间</td>
                <td>
                    <input type="date" v-model="form.createtime" class="form-inline" >
                </td>
            </tr>
            <tr class="form-inline">
                <td><span style="color: red;">*</span>图片</td>
                <td>
                    <img :src="form.mimg" style="width: 100px;height: 100px;">
                    <input type="file" @change="img2" >
                </td>
            </tr>
            <tr class="form-inline">
                <td><span style="color: red;">*</span>账号</td>
                <td>
                    <input type="text" v-model="form.zhanghao" class="form-inline" >
                </td>
            </tr>
            <tr class="form-inline">
                <td><span style="color: red;">*</span>密码</td>
                <td>
                    <input type="password" v-model="form.password" class="form-inline" >
                </td>
            </tr>
            <tr class="form-inline">
                <td><span style="color: red;">*</span>姓名</td>
                <td>
                    <input type="text" v-model="form.name" class="form-inline" >
                </td>
            </tr>
            <tr class="form-inline">
                <td><span style="color: red;">*</span>联系方式</td>
                <td>
                    <input type="text" v-model="form.phone" class="form-inline" >
                </td>
            </tr>
            <tr class="form-inline">
                <td><span style="color: red;">*</span>角色</td>
                <td>
                    <select v-model="form.player" class="form-inline" >
                        <option :value="0">--请选择--</option>
                        <option value="老师">老师</option>
                        <option value="主任">主任</option>
                        <option value="校长">校长</option>
                        <option value="学生">学生</option>
                    </select>
                </td>
            </tr>
            <tr class="form-inline">
                <td colspan="2" style="text-align: center;">
                    <button class="btn btn-primary" @click="upd">修改</button>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import "bootstrap/dist/css/bootstrap.min.css"
import router from '@/router';
import { useRoute } from 'vue-router';

const route = useRoute();

const fantian = () => {
    axios.get("https://localhost:7230/api/Message/fintian?mid="+ route.query.mid).then(res => {
        let d = res.data;
        form.createtime = d.createtime;
        form.mimg = d.mimg;
        form.zhanghao = d.zhanghao;
        form.password = d.password;
        form.name = d.name;
        form.phone = d.phone;
        form.player = d.player;
    })
}

const form = reactive({
    mid: route.query.mid,
    "createtime": "",
  "mimg": "",
  "zhanghao": "",
  "password": "",
  "name": "",
  "phone": "",
  "del": true,
  "player": "0"
})

const img2 = (e:any) => {
    let file = e.target.files[0];
    const data = new FormData();
    data.append("file", file);
    axios.post("https://localhost:7230/api/Message/upload",data).then(res => {
        form.mimg = res.data;
    })
}

const upd = () => {
    if (!form.createtime) {
        alert("时间不能为空");
        return;
    }
    if (!form.mimg) {
        alert("图片不能为空");
        return;
    }
    if (!form.zhanghao) {
        alert("账号不能为空");
        return;
    }
    if (!form.password) {
        alert("密码不能为空");
        return;
    }
    if (!form.name) {
        alert("姓名不能为空");
        return;
    }
    if (!form.phone) {
        alert("联系方式不能为空");
        return;
    }
    if (!form.player) {
        alert("角色不能为空");
        return;
    }
    axios.put("https://localhost:7230/api/Message/upd", form).then(res => {
        if (res.data > 0) {
            alert("修改成功");
            router.push("/fenyeshow")
        }
        else {
            alert("修改失败");
            return;
        }
    })
}

onMounted(() => {
    fantian();
})


</script>